72 Controls (Survey Shaper V8 only)

IMPORTANT NOTE: the Controls property has been updated in Survey Shaper Version 8! Users of V7, please disregard this page and go to 72 Controls to see the relevant list of Controls.

What Is It?

The Controls property allows you to tailor the presentation of questions using optional keyword commands.

How Do I Use This?

Copy the code on this page that corresponds to the question type you are editing, and paste it into the 72 Controls box in the Advanced section of the Properties Pane. Edit the code as required and Save.

General Control Properties (All question Types)

Control format (with defaults)

Notes

Copy
{
"buttonsOverride": { "NEXT": "Next", "BACK": "Back"},
"buttonsDisableForSeconds": { "NEXT": 0, "BACK": 0 },
"messagesOverride": { "MESSAGE_CODE": "New message" }
}

buttonsOverride: Allows overriding the Next/Back button text on the current page.

buttonsDisableForSeconds: Allows disabling buttons for X seconds (decimals allowed)

Control Properties - Clickable Image

Control format (with defaults)

Notes

Copy
{
"hasTimer": true,
"hasReset": true,
"hasZoom": true,
"zoomButtonEnableText": "Enable Zoom",
"zoomButtonDisableText": "Disable Zoom",
"resetButtonText": "Clear",
"timerMinuteText": "min",
"timerSecondText": "sec"
}

hasTimer: Show/hide the timer

hasReset: Show/hide reset button

hasZoom: Show/hide zoom button

Button text for translations

Control Properties - Multiple Response - Checkbox Grid

Control format (with defaults)

Notes

Copy

"columnValidation": false 
}

columnValidation: when true Respondents must check one option per column. When off they must choose one per row.

Control Properties - Multiple Response - Numerical

Control format (with defaults)

Notes

Copy
{
"prefix": "",
"suffix": "",
"totalText": "Total",
"answerLabel":"text"
"decimalPlaces": 2
}

Priority is Answer Header, Question Verbatim Prefix, then if both empty, Control "prefix" shown.

Same re:Suffix. totalText is the text label of the Total section.

"answerLabel" setting as per Multi Verbatim (see below)

"decimalPlaces" - set allowable number of decimals in numbers. 0 to allow no decimals.

Control Properties - Multiple Response - Numerical Grid

Control format (with defaults)

Notes

Copy
{
"decimalPlaces": 2
}

"decimalPlaces" - set allowable number of decimals in numbers. 0 to allow no decimals.

Control Properties - Multiple Response - Numerical - Stacked Slider

Control format (with defaults)

Notes

Copy
{
"hideMiddleLabel": false,
"displayLabels": true,
"step": 1.0,
"noTicks": false,
"allowReset": false,
"resetButtonText": "Reset"
}

 

Control Properties - Multiple Response - Verbatim

Control format (with defaults)

Notes

Copy
{
"initialHeightRows": 2,
"answerLabel": "text",
"minCount": -1,
"maxCount": -1
}

"answerLabel" can be "text" (default), "html" or "image" - html allows for using html in the label but still fixed to one line. Text is default to avoid regression issues with existing surveys. image allows for multi-line or images and the textbox will properly move down rather than be overlapped.

minCount and maxCount set min/max number of verbatims in the list to fill in. Overrides any mandatory settings on answers/question.

Note that Question level "compulsory" overrides Answer level. Set question to not-compulsory to require specific answers only to be compulsory.

Control Properties - Single Response - Date DropDown

Control format (with defaults)

Notes

Copy
{    
"dayPlaceholder": "Day",
"monthPlaceholder": "Month",
"yearPlaceholder": "Year",
"placeholder": "Select a date"
}

 

Control Properties - Single Response - Date Picker

Control format (with defaults)

Notes

Copy

"placeholder": "Select a date", 
"defaultLocale": "en-AU" 
}

placeholder: shown in drop-down before selection

defaultLocale: default "locale" (as used in Google Material) for date picker. Default Australia. This effects format of date shown in textbox when selected too (ie. mm/dd/yyyy AU vs. dd/mm/yyyy US).

Control Properties - Single Response - DateTime DropDown

Control format (with defaults)

Notes

Copy
{   
"dayPlaceholder": "Day",
"monthPlaceholder": "Month",
"yearPlaceholder": "Year",
"hourPlaceholder": "Hour",
"minutePlaceholder": "Minute"
}

 

Control Properties - Single Response - DropDown

Control format (with defaults)

Notes

Copy
{      
"showFilter": false,
"noOptionsFoundText": "No options found",
"placeholder": "",
"noneOptionText": "None"
}

showFilter: Shows a textbox in the drop-down to filter options

noOptionsFoundText: The text to show if the filter text matches no available options

Control Properties - Single Response - DropDown Grid

Control format (with defaults)

Notes

Copy
{     
"placeholder": "",     
"noneOptionText": "None"
}

 

Control Properties - Single Response - File Upload

Control format (with defaults)

Notes

Copy
{
"allowedExtensions": ".jpg,.png,.jpeg",
"maxFileSize": 1000000
}

maxFileSize is in bytes and is validated on the client (before upload). allowedExtensions is a comma delimited list of extensions including the ., validated on the client. Add a hidden verbatim code suffixed by FileData to get info on the uploaded file exported (eg. Q3 is upload file question type, Q3FileData is hidden Verbatim)

Control Properties - Single Response - Horizontal Radio

Control format (with defaults)

Notes

Copy
{
"startAnchor": "",
"middleAnchor": "",
"endAnchor": "",
"anchorPosition": "bottom",
"separator": "-",
"showAnchors": true,
"placeholder": "",
"noneOptionText": "None",
"sliderAtWidth": 0,
"mobileWidth": 0,
"mobileMode": "",
"hideMiddleLabel": false,
"displayLabels": true,
"step": 1.0,
"noTicks": false,
"notSureOnRight": false
}

mobileMode: vertical, dropdown or slider

separator: separator characters between start/end/middle codes and startAnchor/endAnchor when in Vertical Radio mode

showAnchors: hide all anchors when in Single Horizontal mode (still show when in slider mode)

hideMiddleLabel: hides middle label when in slider or vertical mode

displayLabels: When false codes are shown in slider sliders instead of Answer labels

noTicks: hide labels completely when in slider mode

placeholder: Placeholder used in drop-down when drop-down mode

noneOptionText: text used in drop-down when none option is visible (ie. when not compulsory)

anchorPosition: "top" or "bottom" - default "bottom" - effects both default and Slider modes start/middle/end anchor text can include html, just ensure any quotes are apostrophes

Control Properties - Single Response - Horizontal Radio Grid

Control format (with defaults)

Notes

Copy
{
"showAnchors": false,    
"startAnchor": "",      
"middleAnchor": "",      
"endAnchor": "",      
"separator": "-",
"placeholder": "",      
"noneOptionText": "None",      
"hideMiddleLabel": false,      
"displayLabels": true,      
"step": 1.0,      
"noTicks": false,      
"mobileWidth": 0,      
"mobileMode": ""
}

mobileWidth: Width at which mobile mode switches

mobileMode: "slider" or "dropdown"

hideMiddleLabel, displayLabels, step, noTicks all relevant only when showing slider.

Setting step to a decimal value in this case wouldn't make sense as it should map back to a single Radio code. It may make sense to change to > 1 (eg. codes 2,4,6)

placeholder: Placeholder used in drop-down when drop-down mode

noneOptionText: text used in drop-down when none option is visible (ie. when not compulsory)

Control Properties - Single Response - Numerical

Control format (with defaults)

Notes

Copy

"placeholder": "" 
}

 

Control Properties - Single Response - Ranking

Control format (with defaults)

Notes

Copy

"mobileMode": "dropdown", 
"mobileWidth": 600, 
"minCount": -1, 
"maxCount": -1
}

When set to mandatory all items must be set with a ranking.

minCount sets a minimum number of items you must rank, overriding Mandatory option. -1 implies no minimum, defaulting back to Mandatory setting.

Control Properties - Single Response - Slider

Control format (with defaults)

Notes

Copy
{
"hideMiddleLabel": false,
"displayLabels": true,
"step": 1.0,
"noTicks": false,
"notSureOnRight": false,
"startLabel": "",
"endLabel": "",
"startPosition": -1,
"thumbLabelMode": "code"
}

Labels are detected from codelabels automatically (Start, Middle and End). Start and End can be overridden with startLabel/endLabel settings.

startPosition sets default value of slider to the indicated code.

thumbLabelMode = "label" will show Answer label (default back to code if Answer label text is empty) in the thumb.

 

Control Properties - Single Response - Smile Badge

Control format (with defaults)

Notes

Copy
{
"hideMiddleLabel": false,
"displayLabels": true,
"step": 1.0,
"noTicks": false,
"notSureOnRight": false,
"startLabel": "",
"endLabel": "",
"startPosition": -1,
"thumbLabelMode": "code",
"thumbLabel": false,
"badge": "face",
"badgeWidth": 292,
"badgeHeight": 292,
"badgeColors": ["#ef5354", "#f58837", "#999", "#4eba7d", "#10b5d5"],
"badgeLineColor": "#231f20"
}

Exact same setup as Single Slider, but a "badge" appears above the Slider responding to the slider value.

Additional settings:

thumbLabel: disabled by default

badge: "face", "tearface" or "fuel" - to set to face badge, face badge with tear, or fuel gauge badge

badgeWidth, badgeHeight: Height and width of the badge

badgeColours: (only relevant to Face, allows config of the four main colours that fade in the face)

badgeLineColor: Allows configuring different main colour of "lines" (ie. eyes, mouth) in the face

Control Properties - Single Response - Slider Grid

Control format (with defaults)

Notes

Copy
{
"hideMiddleLabel": false,     
"displayLabels": true,      
"step": 1.0,      
"noTicks": false,      
"notSureOnRight": false
}

 

Control Properties - Single Response - Time DropDown

Control format (with defaults)

Notes

Copy
{
"minutePlaceholder": "Minute",    
"hourPlaceholder": "Hour"
}

configure placeholders in the drop-downs shown for Hour and Minute

Control Properties - Single Response - Time Entry

Control format (with defaults)

Notes

Copy
{
"minutePlaceholder": "Minute",    
"hourPlaceholder": "Hour"
}

 

 

Control Properties - Single Response - Time Picker

Control format (with defaults)

Notes

Copy
{
"minutePlaceholder": "Minute",    
"hourPlaceholder": "Hour"
}

configure placeholders in the drop-downs shown for Hour and Minute

Control Properties - Single Response - Verbatim

Control format (with defaults)

Notes

Copy
{    
placeholder: "",   
inputType: "text",   
"initialHeightRows": 2
}

placeholder: Shows as Google Material placeholder. Off by default, likely will be needed for accessibility.

inputType: html "type" on INPUT element. Ignored if Multi-line. Can set to "number" or "date" or other html options. Experimental.

initialHeightRows: initial height (in text rows) of multiline verbatim

Control Properties - Single Response - Vertical Radio Grid

Control format (with defaults)

Notes

Copy
{
"showAnchors": false,    
"startAnchor": "",
"middleAnchor": "",
"endAnchor": ""
}

Anchors as per Horizontal Radio grid

Control Properties - Shelf Simulator - Multi

Control format (with defaults)

Notes

Copy
{
"projectId": "",
"answerMap": [{"code": 1, "productId": ""}],
"cartEmptyMessage": "Your shopping cart is empty",
"hasTimer": true,
"hasReset": true,
"hasZoom": true,
"budget": -1,
"allowDuplicates": false,
"zoomButtonEnableText": "Enable Zoom",
"zoomButtonDisableText": "Disable Zoom",
"resetButtonText": "Reset"
}

 

Control Properties - Shelf Simulator - Ranking

Control format (with defaults)

Notes

Copy
{
"projectId": "",
"answerMap": [{"code": 1, "productId": ""}],
"cartEmptyMessage": "Your shopping cart is empty",
"hasTimer": true,
"hasReset": true,
"hasZoom": true,
"budget": -1,
"allowDuplicates": false,
"zoomButtonEnableText": "Enable Zoom",
"zoomButtonDisableText": "Disable Zoom",
"resetButtonText": "Reset"
}

 

Control Properties - Single Response - Card Sort

Control format (with defaults)

Notes

Copy
{
"hasReset": true
"resetButtonText": "Reset"
}

Same setup as a Horizontal Radio Grid but presents as a drag-drop card sort where cards are Rows and Buckets are Answers.